<template>
  <div class="main">
    <van-nav-bar
      title="我的订单"
      left-text="返回"
      right-text="返回首页"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <el-card>
      <el-descriptions
        title="我的订单"
        :column="1"
        size="mini"
        v-for="item in orderList"
        :key="item._id"
      >
        <el-descriptions-item label="姓名">{{
          item.name
        }}</el-descriptions-item>
        <el-descriptions-item label="下单时间"
          ><el-tag type="warning" size="mini">{{
            item.orderDate
          }}</el-tag></el-descriptions-item
        >
        <el-descriptions-item label="就诊时间" :span="2">
          <el-tag v-if="item.visitDate === null" size="mini" type="danger"
            >未处理</el-tag
          >
          <el-tag v-else size="mini">{{ item.visitDate }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="操作">
          <el-button type="primary" size="mini" @click="showInfo(item.orderID)"
            >查看就诊地址</el-button
          >
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
    <van-popup v-model="show" closeable round position="bottom">
      <el-card>
      <el-descriptions title="订单信息" :column="1">
        <el-descriptions-item label="姓名">{{orderInfo.name}}</el-descriptions-item>
        <el-descriptions-item label="性别">{{orderInfo.sex}}</el-descriptions-item>
        <el-descriptions-item label="年龄">{{orderInfo.age}}</el-descriptions-item>
        <el-descriptions-item label="电话">{{orderInfo.phone}}</el-descriptions-item>
        <el-descriptions-item label="症状">
          <el-tag size="small" v-for="item in orderInfo.symptom" :key="item">{{item}}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="下单时间">
          <el-tag size="small">{{orderInfo.date}}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="预约就诊时间">
          <el-tag size="small" type="danger" v-if="orderInfo.orderDate === null">未处理</el-tag>
          <el-tag size="small" type="danger" v-else>{{orderInfo.orderDate}}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="就诊地址">
          <el-tag size="small" type="danger" v-if="orderInfo.address === null">未处理</el-tag>
          <el-tag size="small" type="danger" v-else>{{orderInfo.address}}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="就诊二维码">
         <img src="../../assets/img/24012DBD7C65EAEEEAF654D78498B63E.png" alt="" style="width:240px;height:240px;border-radius:5px">
        </el-descriptions-item>
      </el-descriptions>
      </el-card>
    </van-popup>
  </div>
</template>

<script>
export default {
  data () {
    return {
      patientID: window.sessionStorage.getItem('id'),
      orderList: [],
      show: false,
      orderInfo: {}
    }
  },
  created () {
    this.getorderList()
  },
  methods: {
    onClickLeft () {
      this.$router.push('/order')
    },
    onClickRight () {
      this.$router.push('/index')
    },
    async getorderList () {
      const { data: res } = await this.$http.get(
        '/user/myorder/orderlist/' + this.patientID
      )
      if (res.status !== 200) return this.$Toast.fail('获取列表失败')
      this.orderList = res.orderList
    },
    async showInfo (id) {
      const { data: res } = await this.$http.get('/api/order/orderinfo/' + id)
      this.orderInfo = res.info
      console.log(res)
      this.show = true
    }
  }
}
</script>

<style scoped>
.el-card {
  width: 100%;
  height: 720px;
  overflow: scroll;
}
</style>
